{% extends "base.html" %}

{% block title %}历史记录 - EI Power问题管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-clock-history"></i> 历史问题记录</h2>
            <a href="{{ url_for('submit_feedback') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 新增问题
            </a>
        </div>
    </div>
</div>

{% if feedback_list %}
<!-- 统计信息 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h3 class="text-primary">{{ feedback_list|length }}</h3>
                <small class="text-muted">总问题数</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h3 class="text-warning">{{ feedback_list|selectattr('status', 'equalto', '新问题')|list|length }}</h3>
                <small class="text-muted">新问题</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h3 class="text-info">{{ feedback_list|selectattr('status', 'equalto', '处理中')|list|length }}</h3>
                <small class="text-muted">处理中</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h3 class="text-success">{{ feedback_list|selectattr('status', 'equalto', '已解决')|list|length }}</h3>
                <small class="text-muted">已解决</small>
            </div>
        </div>
    </div>
</div>

<!-- 反馈列表 -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="mb-0">问题记录列表</h5>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" class="form-control" id="search-input" placeholder="搜索问题内容...">
                            <button class="btn btn-outline-secondary" type="button" id="search-btn">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="feedback-table">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 15%;">编号</th>
                                <th style="width: 40%;">问题内容</th>
                                <th style="width: 10%;">状态</th>
                                <th style="width: 15%;">提交时间</th>
                                <th style="width: 20%;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for feedback in feedback_list %}
                            <tr class="feedback-row">
                                <td>
                                    <code class="small">{{ feedback.id }}</code>
                                </td>
                                <td>
                                    <div class="feedback-content" data-content="{{ feedback.content }}">
                                        <div class="text-truncate" style="max-width: 300px;" title="{{ feedback.content }}">
                                            {{ feedback.content }}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if feedback.status == '新问题' %}
                                        <span class="badge bg-primary">{{ feedback.status }}</span>
                                    {% elif feedback.status == '处理中' %}
                                        <span class="badge bg-warning">{{ feedback.status }}</span>
                                    {% elif feedback.status == '已解决' %}
                                        <span class="badge bg-success">{{ feedback.status }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ feedback.created_at.strftime('%Y-%m-%d %H:%M') if feedback.created_at else '' }}
                                    </small>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-outline-info btn-sm" 
                                                data-id="{{ feedback.id }}"
                                                data-content="{{ feedback.content|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-status="{{ feedback.status }}"
                                                data-revised="{{ (feedback.revised_proposal or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-comment="{{ (feedback.admin_comment or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-handler="{{ feedback.handler or '' }}"
                                                data-has-answer="{{ feedback.has_answer or false }}"
                                                data-answer="{{ (feedback.answer or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-created="{{ feedback.created_at.strftime('%Y-%m-%d %H:%M') if feedback.created_at else '' }}"
                                                data-updated="{{ feedback.updated_at.strftime('%Y-%m-%d %H:%M') if feedback.updated_at else '' }}"
                                                onclick="showFeedbackDetailFromData(this)">
                                            <i class="bi bi-eye"></i> 详情
                                        </button>
                                        {% if feedback.status == '新问题' %}
                                        <button class="btn btn-outline-primary btn-sm" 
                                                data-id="{{ feedback.id }}"
                                                data-content="{{ feedback.content|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-has-answer="{{ feedback.has_answer or false }}"
                                                data-answer="{{ (feedback.answer or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                onclick="editFeedbackFromData(this)"
                                                title="编辑问题">
                                            <i class="bi bi-pencil"></i> 编辑
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- 空状态 -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <i class="bi bi-inbox display-1 text-muted"></i>
                <h4 class="text-muted mt-3">暂无问题记录</h4>
                <p class="text-muted">您还没有提交过任何问题，开始提交您的第一个问题吧！</p>
                <a href="{{ url_for('submit_feedback') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 立即提交问题
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 编辑问题模态框 -->
<div class="modal fade" id="editFeedbackModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil"></i> 编辑问题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editFeedbackForm" method="POST" action="{{ url_for('edit_user_feedback') }}">
                <div class="modal-body">
                    <input type="hidden" id="edit-feedback-id" name="feedback_id">
                    
                    <div class="mb-3">
                        <label for="edit-content" class="form-label">
                            <i class="bi bi-chat-text"></i> 问题内容 <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control" id="edit-content" name="content" rows="6" 
                                placeholder="请详细描述您遇到的问题、建议或意见..." 
                                required maxlength="1000"></textarea>
                        <div class="form-text">
                            <span class="text-muted">还可输入 <span id="edit-char-count">1000</span> 个字符</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit-has-answer" name="has_answer" value="1">
                            <label class="form-check-label" for="edit-has-answer">
                                <i class="bi bi-lightbulb-fill"></i> 我有答案或解决方案
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-3" id="edit-answer-section" style="display: none;">
                        <label for="edit-answer" class="form-label">
                            <i class="bi bi-check-circle"></i> 您的答案或解决方案
                        </label>
                        <textarea class="form-control" id="edit-answer" name="answer" rows="4" 
                                placeholder="请详细描述您的答案或解决方案..." 
                                maxlength="1000"></textarea>
                        <div class="form-text">
                            <span class="text-muted">还可输入 <span id="edit-answer-char-count">1000</span> 个字符</span>
                        </div>
                    </div>
                    
                    <div class="alert alert-info border-0" role="alert">
                        <i class="bi bi-info-circle"></i>
                        <strong>注意：</strong>只有状态为"新问题"的问题才能编辑。编辑后问题将保持"新问题"状态。
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle"></i> 保存修改
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 反馈详情模态框 -->
<div class="modal fade" id="feedbackDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-file-text"></i> 问题详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>编号：</strong>
                        <code id="detail-id"></code>
                    </div>
                    <div class="col-md-6">
                        <strong>状态：</strong>
                        <span id="detail-status-badge"></span>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong>问题内容：</strong>
                    <div class="bg-light p-3 rounded mt-2" id="detail-content"></div>
                </div>
                
                <div class="mb-3" id="answer-section" style="display: none;">
                    <strong>提交者的答案/解决方案：</strong>
                    <div class="bg-primary bg-opacity-10 p-3 rounded mt-2" id="detail-answer"></div>
                </div>
                
                <div class="mb-3" id="revised-proposal-section" style="display: none;">
                    <strong>修正问题：</strong>
                    <div class="bg-info bg-opacity-10 p-3 rounded mt-2" id="detail-revised-proposal"></div>
                </div>
                
                <div class="mb-3" id="admin-comment-section" style="display: none;">
                    <strong>处理意见：</strong>
                    <div class="bg-success bg-opacity-10 p-3 rounded mt-2" id="detail-admin-comment"></div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <strong>提交时间：</strong>
                        <span id="detail-created-at" class="text-muted"></span>
                    </div>
                    <div class="col-md-6" id="handler-section" style="display: none;">
                        <strong>处理人：</strong>
                        <span id="detail-handler" class="text-muted"></span>
                    </div>
                </div>
                
                <div class="row mt-2" id="updated-section" style="display: none;">
                    <div class="col-md-6">
                        <strong>更新时间：</strong>
                        <span id="detail-updated-at" class="text-muted"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 搜索功能
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
const feedbackRows = document.querySelectorAll('.feedback-row');

function performSearch() {
    const searchTerm = searchInput.value.toLowerCase().trim();
    
    feedbackRows.forEach(row => {
        const content = row.querySelector('.feedback-content').dataset.content.toLowerCase();
        const id = row.querySelector('code').textContent.toLowerCase();
        
        if (content.includes(searchTerm) || id.includes(searchTerm) || searchTerm === '') {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

searchInput.addEventListener('input', performSearch);
searchBtn.addEventListener('click', performSearch);

// 回车搜索
searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        performSearch();
    }
});

// 显示问题详情
function showFeedbackDetail(id, content, status, revisedProposal, adminComment, handler, hasAnswer, answer, createdAt, updatedAt) {
    document.getElementById('detail-id').textContent = id;
    document.getElementById('detail-content').textContent = content;
    document.getElementById('detail-created-at').textContent = createdAt;
    
    // 状态徽章
    const statusBadge = document.getElementById('detail-status-badge');
    if (status === '新问题') {
        statusBadge.innerHTML = '<span class="badge bg-primary">新问题</span>';
    } else if (status === '处理中') {
        statusBadge.innerHTML = '<span class="badge bg-warning">处理中</span>';
    } else if (status === '已解决') {
        statusBadge.innerHTML = '<span class="badge bg-success">已解决</span>';
    }
    
    // 答案/解决方案
    const answerSection = document.getElementById('answer-section');
    if (hasAnswer === 'True' && answer && answer.trim()) {
        document.getElementById('detail-answer').textContent = answer;
        answerSection.style.display = 'block';
    } else {
        answerSection.style.display = 'none';
    }
    
    // 修正问题
    const revisedSection = document.getElementById('revised-proposal-section');
    if (revisedProposal && revisedProposal.trim()) {
        document.getElementById('detail-revised-proposal').textContent = revisedProposal;
        revisedSection.style.display = 'block';
    } else {
        revisedSection.style.display = 'none';
    }
    
    // 处理意见
    const commentSection = document.getElementById('admin-comment-section');
    if (adminComment && adminComment.trim()) {
        document.getElementById('detail-admin-comment').textContent = adminComment;
        commentSection.style.display = 'block';
    } else {
        commentSection.style.display = 'none';
    }
    
    // 处理人
    const handlerSection = document.getElementById('handler-section');
    if (handler && handler.trim()) {
        document.getElementById('detail-handler').textContent = handler;
        handlerSection.style.display = 'block';
    } else {
        handlerSection.style.display = 'none';
    }
    
    // 更新时间
    const updatedSection = document.getElementById('updated-section');
    if (updatedAt && updatedAt.trim()) {
        document.getElementById('detail-updated-at').textContent = updatedAt;
        updatedSection.style.display = 'block';
    } else {
        updatedSection.style.display = 'none';
    }
    
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('feedbackDetailModal'));
    modal.show();
}

// 从按钮数据属性显示问题详情
function showFeedbackDetailFromData(button) {
    var id = button.getAttribute('data-id');
    var content = button.getAttribute('data-content');
    var status = button.getAttribute('data-status');
    var revised = button.getAttribute('data-revised');
    var comment = button.getAttribute('data-comment');
    var handler = button.getAttribute('data-handler');
    var hasAnswer = button.getAttribute('data-has-answer');
    var answer = button.getAttribute('data-answer');
    var created = button.getAttribute('data-created');
    var updated = button.getAttribute('data-updated');
    
    showFeedbackDetail(id, content, status, revised, comment, handler, hasAnswer, answer, created, updated);
}

// 编辑问题功能
function editFeedbackFromData(button) {
    var id = button.getAttribute('data-id');
    var content = button.getAttribute('data-content');
    var hasAnswer = button.getAttribute('data-has-answer');
    var answer = button.getAttribute('data-answer');
    
    // 设置表单数据
    document.getElementById('edit-feedback-id').value = id;
    document.getElementById('edit-content').value = content;
    
    // 设置has_answer复选框状态
    const hasAnswerCheckbox = document.getElementById('edit-has-answer');
    hasAnswerCheckbox.checked = hasAnswer === 'True' || hasAnswer === '1' || hasAnswer === 1 || hasAnswer === true;
    
    // 设置answer字段值
    document.getElementById('edit-answer').value = answer || '';
    
    // 控制答案输入框的显示/隐藏
    toggleEditAnswerSection();
    
    // 更新字符计数
    updateEditCharCount();
    updateEditAnswerCharCount();
    
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('editFeedbackModal'));
    modal.show();
}

// 控制编辑模态框中答案输入框的显示/隐藏
function toggleEditAnswerSection() {
    const hasAnswerCheckbox = document.getElementById('edit-has-answer');
    const answerSection = document.getElementById('edit-answer-section');
    
    if (hasAnswerCheckbox.checked) {
        answerSection.style.display = 'block';
    } else {
        answerSection.style.display = 'none';
        document.getElementById('edit-answer').value = '';
    }
}

// 更新编辑模态框中问题内容的字符计数
function updateEditCharCount() {
    const content = document.getElementById('edit-content').value;
    const remaining = 1000 - content.length;
    document.getElementById('edit-char-count').textContent = remaining;
}

// 更新编辑模态框中答案的字符计数
function updateEditAnswerCharCount() {
    const answer = document.getElementById('edit-answer').value;
    const remaining = 1000 - answer.length;
    document.getElementById('edit-answer-char-count').textContent = remaining;
}

// 绑定编辑模态框事件
document.addEventListener('DOMContentLoaded', function() {
    // 绑定has_answer复选框变化事件
    document.getElementById('edit-has-answer').addEventListener('change', toggleEditAnswerSection);
    
    // 绑定字符计数事件
    document.getElementById('edit-content').addEventListener('input', updateEditCharCount);
    document.getElementById('edit-answer').addEventListener('input', updateEditAnswerCharCount);
});
</script>
{% endblock %}